<template>
  <div class="main-right-box">
    <div class="main-right">
      <div class="fix-btns">
        <div class="fix-btn" @click="shopcart" v-show="isLogin && !shopHide">
          采购清单
          <span class="float-badge" v-if="shopcartnum > 0">{{shopcartnum <= 1000 ? shopcartnum : '999+'}}</span>
        </div>
        <a class="shopcart-box" @click="$router.go(-1), shopback = false" v-if="shopcartback">
          <img src="../../static/shopcart-back.png">
          <p class="text">返回</p>
        </a>
        <i class="fix-line"></i>
        <div class="fix-btn" id="openQQ">在线客服</div>
        <i class="fix-line"></i>
        <div class="fix-btn link_telephone" @mouseenter="tel_show = true" @mouseleave="tel_show = false">
          联系我们
          <div class="link_number" :class="{link_hover: tel_show}">
            <p>客服电话：0576-86999962</p>
            <p>周一至周日：9:00-18:00</p>
          </div>
        </div>
        <i class="fix-line"></i>
        <div class="fix-btn advicebtn" @click="opinionVisi = true">反馈</div>
        <i class="fix-line"></i>
        <div class="fix-btn" style="color: #FF9640;" v-show="!isTop" @click="top">回到顶部</div>
        <!-- <i class="fix-line" v-show="!isTop"></i> -->
      </div>
      <el-dialog title="关于刀具联盟，我们想采纳您更多的意见" :visible.sync="opinionVisi" width="450px">
        <section class="text-box">
          <textarea class="textarea_con" v-model="feedtext" placeholder="请在此处写下您对我们产品的建议" rows="8"></textarea>
          <span class="word_num">{{textLen}}/<em>250</em></span>
          <el-button type="primary" size="small" :disabled="textLen === 0 " class="submitBtn" @click="submitFeed">确定</el-button>
        </section>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {getCookie} from '@/config/mUntils'
import {postFeedback} from '@/service/get-data'
import {Dialog, Button} from 'element-ui'
export default {
  components: {
    elDialog: Dialog,
    elButton: Button
  },
  data () {
    return {
      opinionVisi: false, // 反馈窗口显示
      feedtext: '', // 反馈内容
      isTop: true, // 页面是否未滚动
      tel_show: false // 客服电话隐藏/显示
    }
  },
  computed: {
    Token () {
      return getCookie('Token')
    },
    // 是否通过审核
    Exam () {
      return this.$store.state.user.isExam - 0
    },
    // 反馈内容长度
    textLen () {
      return this.feedtext.length
    },
    shopcartback () {
      return this.$store.state.shopcartback
    },
    isLogin () {
      return this.$store.state.user.isLogin
    },
    shopHide () {
      return this.$store.state.shopcartHide
    },
    shopcartnum () {
      return this.$store.state.shopcart.shopcartnum
    }
  },
  methods: {
    // 回到顶部
    top () {
      document.body.scrollTop = document.documentElement.scrollTop = 0
    },
    // 打开购物车
    shopcart () {
      if (!this.Token) return
      let actions = new Map([
        [1, () => {
          // this.$refs.floatShopRef.className = 'float-shop-pop'
          this.$router.push({name: 'ShopCart'})
          this.shopback = true
        }],
        [3, () => {
          this.$store.commit('EXAMNODO', true)
        }],
        [2, () => {
          this.$store.commit('EXAMFAIL', true)
        }],
        ['default', () => {
          this.$message.error('您的企业信息还在审核中,商品不能加入购物车,我们尽快给您审核.')
        }]
      ])
      let event = actions.get(this.Exam) || actions.get('default')
      event.call(this)
    },
    // 提交反馈
    async submitFeed () {
      let res = await postFeedback(this.feedtext)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.$message({
          message: '反馈提交成功，刀具联盟感谢您的支持!',
          duration: 2000,
          type: 'success'
        })
        this.opinionVisi = false
        this.feedtext = ''
      } else {
        this.$message({
          message: res.data.resultMsg,
          duration: 2000,
          type: 'error'
        })
        this.feedtext = ''
      }
    }
  },
  mounted () {
    // 绑定调用QQ的按钮
    window.BizQQWPA.addCustom({aty: '0', a: '0', ws: 'http://www.viptool.cn', kfuin: '938002768', nameAccount: 4008882488, selector: 'openQQ'})
    // 页面滚动位置监听
    document.onscroll = (e) => {
      if (document.body.scrollTop === 0 && document.documentElement.scrollTop === 0 && window.pageYOffset === 0) {
        this.isTop = true
      } else {
        this.isTop = false
      }
    }
  },
  watch: {
    // 计算反馈信息的字数
    feedtext (newval) {
      if (newval.length + 1 > 250) {
        this.$message({
          message: '字数最多250个',
          type: 'danger'
        })
        this.feedtext = this.feedtext.substring(0, 250)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .main-right-box{
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 100%;
    overflow: hidden;
    // z-index: 1501;
  }
  .main-right{
    // position: absolute;
    // top: 0;
    // right: 0;
    float: right;
    // box-shadow:0px 0px 4px 5px rgba(158,156,156,0.5);
    width: 60px;
    height: 100%;
    background-color: #FFE681;
  }
  .fix-btns{
    position: fixed;
    right: 0;
    top: 290px;
    width: 60px;
    background: none;
    font-size: 0;
    color: #666;
    .fix-btn{
      font-size: 12px;
      line-height: 17px;
      padding: 7px 17px;
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      cursor: pointer;
      border: 1px solid #FFE681;
      &:hover{
        color: #fff;
        background-color: #373737;
        border: 1px solid rgba(255, 173, 173, 0.5);
      }
    }
    .link_telephone{
      .link_number{
        width: 150px;
        position: static;
        transform: translate(80px, -37px);
        padding-left: 10px;
        line-height: 14px;
        font-size: 10px;
        padding: 7px;
        color: #974B0D;
        text-align: right;
        background: rgba(255,227,179,1);
        bottom: 4px;
        z-index: 11;
        cursor: pointer;
        &.link_hover{
          transform: translate(-176px, -37px);
        }
      }
    }
    .fix-line{
      width: 30px;
      height: 1px;
      background-color: #E1C34B;
      display: block;
      margin: 0 auto;
    }
    .advicebtn{
      height: 35px;
      margin-top: 70px;
    }
  }
  .float-badge{
    position: absolute;
    font-size: 10px;
    min-width: 1.6em;
    line-height: 1.5em;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #f44;
    top: 2px;
    left: 38px;
    color: #fff;
    padding: 2px;
    text-align: center;
  }
  .text-box{overflow:hidden;margin-bottom:10px;}
  .textarea_con {
    box-sizing: border-box;
    width: 100%;
    outline: none;
    padding: 10px;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
  }
  .submitBtn{
    float: right;
    width: 120px;
    color: #444444;
  }
  .word_num{
    margin-top:10px;
    font-size: 14px;
    color: #999999;
    line-height: 30px;
    em{
      color: #2A2A2A;
    }
  }
</style>
